<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot-1</title>
    <style>

        .header{
             background-color: darkorange;
        }

        .body{
            background-color: greenyellow;
        }

        .footer{
            background-color: red;
        }
    </style>
</head>
<body>
<!--

-->
<div id="app">
    <component1>

      test

    </component1>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script type="text/x-template" id="view1">
     <div>
         <slot>message</slot>
     </div>
</script>
<script type="text/x-template" id="view2">
    <div>

        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="body">
            <slot name="body"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>

    </div>
</script>
<script type="text/x-template" id="view3">
    <div>
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="footer">
            <slot></slot>
        </div>

    </div>
</script>
<script>

    /***0. 默认值
     *  1. 匿名插槽
     *  2. 具名插槽
     * */

    var component1 = {
        template: '#view2'
    }

    new Vue({
        el: '#app',
        components: {
            component1
        }
    })

</script>
</html>